<template>
  <div id="app">
    <el-row>
      <el-col :span="16" :offset="4">
        <div class="sys-title">
          <h1 style="letter-spacing: 5px;">互助答疑系统</h1>
        </div>
        <el-row>
          <el-col :span="3"><div><el-button :style="'width: 100%;'+(path === '/'?'background-color:#8AA4F8;color:white;':'')" @click="backToHome">主页面</el-button></div></el-col>
          <el-col :span="4"><div><el-button :disabled="path === '/user-manage'" :style="'width: 100%;'+(path === '/user-manage'?'background-color:#8AA4F8;color:white;':'')" @click="userManage">用户管理</el-button></div></el-col>
          <el-col :span="4"><div><el-button :disabled="path === '/module-manage'" :style="'width: 100%;'+(path === '/module-manage'?'background-color:#8AA4F8;color:white;':'')" @click="checkManage">模块管理</el-button></div></el-col>
          <el-col :span="4"><div><el-button :disabled="path === '/data-center'" :style="'width: 100%;'+(path === '/data-center'?'background-color:#8AA4F8;color:white;':'')" @click="dataCenter">数据中心</el-button></div></el-col>
          <el-col :span="4"><div><el-button :disabled="path === '/question-add'" :style="'width: 100%;'+(path === '/question-add'?'background-color:#8AA4F8;color:white;':'')" @click="questionAdd">新建话题</el-button></div></el-col>
          <el-col :span="3"><div><el-button :disabled="path === '/about'" :style="'width: 100%;'+(path === '/about'?'background-color:#8AA4F8;color:white;':'')" @click="goToAbout">个人中心</el-button></div></el-col>
          <el-col :span="2"><div><el-button style="width: 100%;" @click="openLoginDialog">登录</el-button></div></el-col>
        </el-row>
        <router-view/>
      </el-col>
    </el-row>
    <Login :dialog-visible="loginShow" @closeLoginDialog="closeLoginDialog"></Login>
  </div>
</template>

<script>
import Login from './components/Login.vue';
export default {
  components:{
    Login
  },
  data(){
    return{
      loginShow: false,
      path: ''
    }
  },
  mounted(){
    const that = this
    that.path = that.$route.fullPath
  },
  methods:{
    userManage:function(){
      if(localStorage.getItem('userType') == null || localStorage.getItem('userType') != 'admin'){
        this.$message({
          message:'此区域暂未对您开放'
        })
        return
      }
      let tempPath = this.$route.fullPath
      if('/user-manage' === tempPath){
        return
      }
      this.$router.push('/user-manage')
      this.path = '/user-manage'
    },
    checkManage:function(){
      if(localStorage.getItem('userType') == null || localStorage.getItem('userType') != 'admin'){
        this.$message({
          message:'此区域暂未对您开放'
        })
        return
      }
      let tempPath = this.$route.fullPath
      if('/module-manage' === tempPath){
        return
      }
      this.$router.push('/module-manage')
      this.path = '/module-manage'
    },
    dataCenter:function(){
      if(localStorage.getItem('userType') == null || localStorage.getItem('userType') != 'admin'){
        this.$message({
          message:'此区域暂未对您开放'
        })
        return
      }
      let tempPath = this.$route.fullPath
      if('/data-center' === tempPath){
        return
      }
      this.$router.push('/data-center')
      this.path = '/data-center'
    },
    goToAbout:function(){
      let tempPath = this.$route.fullPath
      if('/about' === tempPath){
        return
      }
      this.$router.push('/about')
      this.path = '/about'
    },
    questionAdd:function(){
      let tempPath = this.$route.fullPath
      if('/question-add' === tempPath){
        return
      }
      this.$router.push('/question-add')
      this.path = '/question-add'
    },
    backToHome:function(){
      const that = this
      let tempPath = that.$route.fullPath
      if('/' === tempPath){
        return
      }
      that.$router.push('/')
      that.path = '/'
    },
    openLoginDialog:function(){
      const that = this
      that.loginShow = true
    },
    closeLoginDialog:function(){
      const that = this
      that.loginShow = false
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
.sys-title{
  height: 150px;
  width: 100%;
  background-image: url(./assets/img/header.jpg);
  background-size: cover;
  line-height: 150px;
}
</style>
